<template>
	<div class="mainHeader">
		<div class="header">
			<!-- 折叠按钮 -->
	        <div class="collapse-btn" @click="handleCollapseChage">
	            <i v-if="!collapse" class="el-icon-s-fold"></i>
	            <i v-else class="el-icon-s-unfold"></i>
	        </div>
	        <div class="logo">
	        	<!--<img src="../../assets/images/logo.png"/>-->
	        	<label>慕林管理平台</label>
	        </div>
	        <div class="header-right">
	            <div class="header-user-con">
	            	<!--<div class="header-search">
	            		<el-input size="mini" v-model="keyWord" placeholder="请输入内容">
			            	<template slot="append">
			              		<el-button type="primary" size="mini" style="background: #333;color: white;padding: 0 15px;height: 28px;line-height: 28px;" @click="handleSearch">查询</el-button>
			            	</template>
			          	</el-input>
	            	</div>-->
	                <!-- 全屏显示 -->
	                <div class="btn-fullscreen" @click="handleFullScreen">
	                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
	                        <i class="el-icon-rank"></i>
	                    </el-tooltip>
	                </div>
	                <!-- 用户头像 -->
	                <div class="user-avator">
	                    <img src="../../assets/images/portrait.png" />
	                </div>
	                <!--<label class="userName">{{username}}</label>-->
	                <!-- 用户下拉菜单 -->
	                <el-dropdown class="user-name" trigger="click" @command="handleUserMenu">
	                    <span class="el-dropdown-link">
	                        {{username}}
	                        <i class="el-icon-caret-bottom"></i>
	                    </span>
	                    <el-dropdown-menu slot="dropdown">
	                    	<el-dropdown-item divided command="updatePwd">修改密码</el-dropdown-item>
	                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
	                    </el-dropdown-menu>
	                </el-dropdown>
	            </div>
	        </div>
		</div>
		
		<!--修改密码模态框-->
		<el-dialog title="修改密码" :visible.sync="dialogUpdatePwdVisible" width="35%">
			<div>
				<el-form :rules="updatePwdRules" ref="updatePwdForm" :model="updatePwdForm" label-width="80px">
					<el-form-item label="旧密码" prop="oldPassword">
						<el-input type="password" v-model="updatePwdForm.oldPassword" placeholder="请输入旧密码"></el-input>
					</el-form-item>
					<el-form-item label="新密码" prop="newPassword">
						<el-input type="password" v-model="updatePwdForm.newPassword" placeholder="请输入新密码"></el-input>
					</el-form-item>
					<el-form-item label="确认密码" prop="checkPassword">
						<el-input type="password" v-model="updatePwdForm.checkPassword" placeholder="请输入确认密码"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
		    	<el-button size="mini" @click="dialogUpdatePwdVisible = false">取 消</el-button>
		    	<el-button class="updatePwdBtn" size="mini" type="primary" @click="handleUpdatePwdSubmit('updatePwdForm')">确 定</el-button>
		  	</span>
		</el-dialog>
	</div>
</template>

<script>
	import header from "./header.js";
	export default header;
</script>

<style>
	@import url("header.css");
</style>